<template>
	<view class="videos">
		<div class="video_main">
			<!-- <video id="J_video_player" controls loop autoplay muted="muted" class="video-player" :src="state.currentVideoUrl"></video> -->
			<videocnp ref="videoPlayer" v-model="state.currentVideoUrl"></videocnp>
		</div>
		<div class="video_list">
			<div class="video_item" v-for="(item, index) in state.videoList" :key="index" @click="changeVideo(item)">
				<video loop muted="muted" class="video_item_video">
					<source :src="item.url" type="video/mp4" />
				</video>
			</div>
		</div>
	</view>
</template>
<script setup lang="ts">
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import videocnp from './videocnp.vue';
const videoPlayer = ref(null);
const state = reactive({
	videoList: [
		{ name: '视频1', url: 'https://t.alipayobjects.com/images/T1T78eXapfXXXXXXXX.mp4' },
		{ name: '视频2', url: 'https://yjy.dxscts.com//upload/files/20230920/75ae76a022738853b913c26672ef01f2.mp4' },
		{ name: '视频3', url: 'https://yjy.dxscts.com//upload/files/20230918/c6898a45368ab57309f49dd902d48764.mp4' },
		// { name: '视频4', url: 'http://cmgw-vpc.lechange.com:8888/LCO/6H02E22PAZ15701/0/1/20230922T081250/2cc57f351f0c5b1c6ec15757c2138178.m3u8' },
	],
	currentVideoUrl: 'http://cmgw-vpc.lechange.com:8888/LCO/6H02E22PAZ15701/0/1/20230922T081250/2cc57f351f0c5b1c6ec15757c2138178.m3u8',
	// currentVideoUrl: 'https://t.alipayobjects.com/images/T1T78eXapfXXXXXXXX.mp4',
});
let changeVideo = (item) => {
	console.log('#debug#🚀 ~ file: videos.vue:29 ~ changeVideo ~ item:', item);

	state.currentVideoUrl = item.url;
	console.log('#debug#🚀 ~ file: videos.vue:34 ~ changeVideo ~ state.currentVideoUrl:', state.currentVideoUrl, videoPlayer);
	videoPlayer.value.changeVideo();
};
// 页面加载时
onMounted(async () => {});
</script>
<style lang="scss" scoped>
.videos {
	position: relative;
	width: 100%;
	height: 410px;
	// background: #fff;
	// border-bottom: #fff solid 1px;
	display: block;
	.video_main {
		position: reactive;
		height: 320px;
		width: 100%;
		background: #000;
		.video-player {
			width: 100%;
			height: 320px;
		}
	}
	.video_list {
		display: flex;
		justify-content: flex-start;
		.video_item {
			width: 142px;
			margin-right: 10px;
			.video_item_video {
				width: 100%;
				height: 80px;
				object-fit: contain;
				outline: none !important;
			}
		}
	}
}
</style>
